import React from 'react';
import '@/components/Header/Header.scss'
import { MenuFoldOutlined, UserOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { Layout, Dropdown, Space } from 'antd';
import { useSelector } from "react-redux";
import { useDispatch } from 'react-redux'
import { useState } from 'react';
import { useNavigate } from "react-router-dom";

interface Props {

}

function Header(props: Props) {

    let navigate = useNavigate()
    let dispatch = useDispatch()

    // 获取侧边导航展开-收起的状态
    let collapsed = useSelector((newstate: any) => newstate.collapsed)

    // 控制侧边导航展开收起
    let handleCollapsed = () => {

        if (collapsed) {
            dispatch({ type: 'SAVE_COLLAPSED', payload: false })
        } else {
            dispatch({ type: 'SAVE_COLLAPSED', payload: true })
        }

    }

    //退出登录
    var exit = () => {
        dispatch({ type: 'REMOVE_TOKEN', payload: null })
        navigate('/login');
    }

    const dropmenuitems: any = [
        {
            key: '1',
            label: <a target="_blank" rel="noopener noreferrer"> 设置 </a>,
        },
        {
            key: '2',
            label: <a onClick={exit} rel="noopener noreferrer"> 退出 </a>
        }
    ];

    return (
        <Layout.Header className='header'>
            {
                collapsed ?
                    <MenuUnfoldOutlined style={{ fontSize: '20px', backgroundColor: 'blue', color: '#fff', padding: '2px' }} onClick={handleCollapsed} />
                :
                    <MenuFoldOutlined style={{ fontSize: '20px', backgroundColor: 'blue', color: '#fff', padding: '2px' }} onClick={handleCollapsed} />
            }
            <div className="welcome">
                欢迎您：{useSelector((newstate: any) => newstate.adminname) || '游客123'}

                <Dropdown menu={{ items: dropmenuitems }}>
                    <a onClick={(e) => e.preventDefault()}>
                        <Space>
                            <UserOutlined className='mine' style={{ fontSize: '18px', color: '#fff' }} />
                        </Space>
                    </a>
                </Dropdown>
            </div>
        </Layout.Header>
    );
}

export default Header;